<template>
  <div class="warpper-box inductionInfo">
    <a-card style="margin-top: 10px;">
      <a-form layout="inline" :form="events_form">
        <a-form-item label="业务描述">
          <a-input placeholder="请输入业务描述" v-decorator="['achievementsName']"></a-input>
        </a-form-item>
        <!-- <a-form-item label="板块类别">
          <a-select v-decorator="['categoryType']" style="width: 220px;" placeholder="选择状态">
            <a-select-option :key="1">
              技能培训
            </a-select-option>
            <a-select-option :key="2">
              慰问关怀
            </a-select-option>
          </a-select>
        </a-form-item> -->
        <a-form-item label="城市">
          <a-cascader v-decorator="['city']" :options="cityList" placeholder="请选择城市" @change="cityChange"
            style="width: 220px;" />
        </a-form-item>
        <a-form-item label="创建时间">
          <a-range-picker v-model="rangeDate" @change="rangeChange" valueFormat="YYYY-MM-DD"></a-range-picker>
        </a-form-item>
        <a-form-item>
          <a-button type='primary' @click="loadTable(true)">查询</a-button>
          <a-button type='primary' @click="reset">重置</a-button>
          <a-button type="primary" @click="$refs.createInfo.add(true,false,2)">新增</a-button>
          <a-button type="danger" @click="downTempTable">下载模版</a-button>
          <a-button type="primary" @click="importTable">导入</a-button>
          <a-button type="warning" @click="exportTable">导出</a-button>
          <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="fileExcel"
            @change="importTableHandle" style="display: none;" />
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="id">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="$refs.createInfo.add(record,false,2)">编辑</a>
          <a-divider type="vertical" />
          <a @click="$refs.createInfo.add(record,true,2)">查看图片</a>
          <span>
            <a-divider type="vertical" />
            <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>

import store from '@/store'
import AddInfo from "./skillsTraining_add.vue"
import {
  COLUMNS_SKILLSTRAINING
} from "./form"
import {
  getPageDisabledAchievements,
  importDisabledDetail,
  deleteAchievements,
  getPageArea,
  exportDisabledAchievements,
  downAchievementsTemplate,
  importDisabledAchievements
} from "@/api/human/disabled"
import { mapGetters,mapActions } from 'vuex'
export default {
  name: 'inductionList',
  components: {
    AddInfo
  },
  data() {
    return {
      table: {
        columns: COLUMNS_SKILLSTRAINING,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },
      
      rangeDate: [], // 日期范围
      createdStartTime: "",
      createdEndTime: "",
      cityList: [], // 城市列表
      cityName: "",
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    this.getCityList();
    this.loadTable(true);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    
  },
  methods: {
    // 日期选择
    rangeChange(e) {
      this.createdStartTime = e[0];
      this.createdEndTime = e[1];
    },
    // 城市选择
    cityChange(value, item) {
      this.cityName = (item.map(city => city.label)).join('/');
    },
    // 获取城市列表
    async getCityList() {
      const { code, data } = await getPageArea();
      if (code == '1') {
        this.cityList = data
      }
    },
    // 获取企业员工列表
    async loadTable(flag) {
      let params = this.events_form.getFieldsValue();
      params.createdStartTime = this.createdStartTime;
      params.createdEndTime = this.createdEndTime;
      params.categoryType = 2;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getPageDisabledAchievements(params);
      if (code == '1') {
        this.table.loadData = data.content || [];
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 导入表单
    importTable() {
      this.$refs.fileExcel.click();
    },
    async importTableHandle(e) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.name.indexOf('.xls') === -1) {
        _this.$message.error("只支持xlsx");
        e.target.value = "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 20)) {
        _this.$message.error('模版大小不能超过 20MB!');
        e.target.value = "";
        return;
      }
      e.target.value = "";
      if (file) {
        let formData = new FormData();
        formData.append("categoryType", 2);
        formData.append("file", file);
        const { code } = await importDisabledAchievements(formData);
        if (code == '1') {
          this.$message.success('操作成功');
          this.loadTable(true);
        }
      }
    },
    // 下载功能
    downTempTable() {
      let params = this.events_form.getFieldsValue();
      downAchievementsTemplate(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '员工关怀模版.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 导出功能
    exportTable() {
      let params = this.events_form.getFieldsValue();
      params.createdStartTime = this.createdStartTime;
      params.createdEndTime = this.createdEndTime;
      params.categoryType = 2;
      exportDisabledAchievements(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '技能培训记录.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    
    // 删除列表数据
    async remove(item) {
      let params = {
        id: item.id
      }
      const {
        code
      } = await deleteAchievements(params);
      if (code == '1') {
        this.$message.success('删除成功');
        this.loadTable(true);
      }
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.events_form.resetFields();
      this.rangeDate = [];
      this.createdStartTime = "";
      this.createdEndTime = "";
      this.loadTable(true);
    },
  }
}
</script>
